<template>
    <div>
        <el-dialog v-model="dialogVisible" :title="title || '编 辑'" width="440" 
            draggable append-to-body align-center :close-on-click-modal="false" :before-close="handleClose">
            <el-form ref="formRef" :model="form" :rules="tableConfig.rules" require-asterisk-position="right"
                :label-position="tableConfig.labelPosition || 'right'" >
                <el-row :gutter="24">
                    <el-col :span="item.formSpan || 12" v-for="(item, index) in columns" :key="index">
                        <el-form-item :label="item.title" :prop="item.key" v-if="!item.formType || item.formType == 'text' ">
                            <el-input v-model="form[item.key]" :maxlength="item.maxlength" :placeholder="`请输入${item.title}`" clearable >
                                <template #append v-if="item.appendLabel">{{ item.appendLabel }}</template>
                            </el-input>
                        </el-form-item>
                        <el-form-item :label="item.title" :prop="item.key" v-if="item.formType == 'textarea' ">
                            <el-input v-model="form[item.key]" type="textarea" :placeholder="`请输入${item.title}`" clearable />
                        </el-form-item>
                        <el-form-item :label="item.title" :prop="item.key" v-if="item.formType == 'number' ">
                            <el-input-number v-model="form[item.key]" :min="item.min" :max="item.max" :precision="item.precision" 
                                :controls="item.controls" :placeholder="`${item.title}值`" style="width: 100%;" />
                        </el-form-item>
                        <el-form-item :label="item.title" :prop="item.key" v-if="item.formType == 'select' ">
                            <el-select v-model="form[item.key]" :placeholder="`请选择${item.title}`" :filterable="item.filterable" 
                                clearable style="width: 100%;">
                                <el-option v-for="sItem in item.options" :key="sItem.value" :label="sItem.label" :value="sItem.value" />
                            </el-select>
                        </el-form-item>
                        <el-form-item :label="item.title" :prop="item.key" v-if="item.formType == 'radio'">
                            <el-radio-group v-model="form[item.key]">
                                <el-radio :label="item.value" v-for="item in item.options" :key="item.value">{{ item.label || '---' }}</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item :label="item.title" :prop="item.key" v-if="item.formType == 'datetime'">
                            <el-date-picker v-model="form[item.key]" :type="item.dateType || 'date'" 
                                clearable :placeholder="`请选择${item.title}`" />
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="cancel"> 取 消 </el-button>
                    <el-button type="primary" @click="confirm"> 确 定 </el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>
<script setup>
    import { ref, reactive, watch } from "vue"
    const { proxy } = getCurrentInstance();
    const props = defineProps( [ 'columns', 'show', 'config', 'defaultValue', 'state', 'title', ] );
    const emit = defineEmits( [ 'update:show', 'confirm', 'cancel' ] );
    const tableConfig = reactive(props.config || {});
    const dialogVisible = ref(false);
    const form = ref({});
    watch(() => props.show, () => { 
        dialogVisible.value = props.show;
        if(props.show){
            form.value = props.defaultValue;
            if(props.state) setDefaultValue();
        }
    }); 
    const setDefaultValue = () => {
        if(props.columns && props.columns.length){
            props.columns.map( item => {
                if(item.defaultValue){
                    form.value[item.key] = item.defaultValue;
                }
            });
        }
    }
    const confirm = () => {
        proxy.$refs["formRef"].validate(valid => {
            if (valid) {
                emit( 'confirm', form );
                handleClose();
            }
        });
    };
    const resetForm = () => {
        proxy.resetForm("formRef");
        form.value = {};
    };
    const cancel = () => {
        handleClose();
        emit( 'cancel' );
    };
    const handleClose = () => {
        dialogVisible.value = false;
        emit('update:show', false);
        resetForm();
    };
</script>
<style scoped>
   :deep(.el-button){
        padding: 5px 10px!important;
        height: 30px;
        line-height: 30px;
    }
    :deep(.el-dialog__title){
        font-size: 16px;
        color: #444
    }
    :deep(.el-dialog__body){
        padding: 10px 25px 0;
    }
    :deep(.el-dialog__footer){
        padding: 10px 25px 20px;
    }
</style>